<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
 
</head>
<body>
    <div id="mydiv"></div>
    <div id="mydiv2"></div>
    <script>
        let str1="字符串1";
        let str2='字符串2';
        let str3=`字符串3`;
        console.log(typeof str1);
        console.log(typeof str2);
        console.log(typeof str3);
        let str4="<p>p01</p>"+
                 "<p>p02</p>"+
                 "<p>p03</p>";
        console.log(str4);

        // 模板字符串是增强版的字符串，用反引号`标识
        // 模板字符串：允许字符串结构换行(保留编码格式的)
        let strs=`
            <p>p01</p>
            <p>p02</p>
            <p>p03</p>
            <p>p04</p>        
        `;
        console.log(strs);
        let mydiv=document.getElementById("mydiv");
        mydiv.innerHTML=strs;

        let arr=["刘亦菲","刘诗诗","霍建华","鹿晗"];
        let u={username:{first:"韩",last:"妃子"}};

        function show(){
            return "哈哈哈哈";
        }

        // 在模板字符串中可以通过语法直接在模板中调用变量:${变量名|对象的变量|全局函数|自定义函数|简单表达式}
        let strs2=`
            <li>${arr[0]}</li>
            <li>${arr[1]}</li>
            <li>${arr[2]}</li>
            <li>${arr[3]}</li>
            <li>${u.username.first}</li>
            <li>${u.username.last}</li>
            <li>${show()}</li>
            <li>${Math.pow(5,6)}</li>
            <li>${200==100?"yes":"no"}</li>
        `;
        console.log(strs2);
        let mydiv2=document.getElementById("mydiv2");
        mydiv2.innerHTML=strs2;
    </script>
</body>
</html>